<template>
  <div class="Page">
    <div style="height: 20px;"></div>
    <div
      id="lineOne"
      style="height: 300px;width: 100%"
    ></div>
    <div style="height: 20px;"></div>
    <div
      id="lineTwo"
      style="height: 300px;width: 100%"
    ></div>
    <div style="height: 20px;"></div>
    <div
      id="lineThree"
      style="height: 300px;width: 100%"
    ></div>
    <div style="height: 20px;"></div>
  </div>
</template>
<script>
// 按需加载
const echarts = require('echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'Page',
  components: {},
  data () {
    return {
      lineOne: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          // 坐标轴类型(类目轴)
          name: '',
          type: 'value',
          axisLabel: {
            show: false,
            textStyle: {
              color: '#ffffff'
            }
          },
          // 是否显示坐标轴刻度
          axisTick: { show: false },
          // 坐标轴线线的颜色
          axisLine: {
            show: false
          },
          // 是否显示网格线
          splitLine: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true, // 是否是反向坐标轴
            data: ['西安市', '铜川市', '咸阳市', '汉中市', '商洛市', '安康市', '渭南市', '宝鸡市', '延安市', '榆林市'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            offset: 10,
            splitLine: { show: false },
            axisTick: { show: false },
            // 坐标轴线线的颜色
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0E3B57',
                type: 'solid',
                width: 1
              }
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside',
            show: true,
            yAxisIndex: [0],
            //  xAxisIndex: [0],
            start: 1,
            end: 50
          }
        ],
        series: [
          {
            name: '用水量',
            type: 'bar',
            // barWidth: "60%",
            data: ['63.27', '27.90', '33.52', '17.98', '42.25', '24.54', '33.96', '11.73', '72.58', '45.36'],
            barWidth: 15,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: false,
                position: 'right',
                offset: [5, -2],
                textStyle: {
                  color: '#11DEF6',
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              // 颜色渐变
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#040F3A' },
                  { offset: 0.5, color: '#02527C' },
                  { offset: 1, color: '#11DEF6' }
                ])
              }
            }
          }
        ]
      },
      lineTwo: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#274C55', '#3E6972', '#67A1A8', '#AECBCE', '#999'],
        legend: {
          right: '4%'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        dataZoom: {
          type: 'inside'
        },
        series: [
          {
            name: 'Baidu',
            type: 'bar',
            barWidth: 25,
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [620, 732, 701, 734, 1090, 1130, 1120]
          },
          {
            name: 'Google',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 290, 230, 220]
          },
          {
            name: 'Bing',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            data: [60, 72, 71, 74, 190, 130, 110]
          },
          {
            name: 'Others',
            type: 'bar',
            stack: 'Search Engine',
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              barBorderRadius: [10, 10, 0, 0]
            },
            data: [62, 82, 91, 84, 109, 110, 120]
          }
        ]
      },
      lineThree: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return `${params[1].seriesName}<br>${params[1].name}:${params[1].value}`
          }
        },
        xAxis: {
          max: 'dataMax',
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['一', '三', '六', '九'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLine: {
            show: false
          }
        },
        dataZoom: {
          type: 'inside'
        },
        grid: {
          left: '3%',
          right: '8%',
          top: '1%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            type: 'pictorialBar',
            symbol: 'rect',
            itemStyle: {
              barBorderRadius: 5,
              color: '#fff'
              // color: 'transparent'
            },
            emphasis: {
              focus: 'series'
            },
            barGap: '2%',
            symbolRepeat: true,
            symbolSize: [5, 30],
            symbolOffset: [-0, 0],
            symbolMargin: 6,
            z: 10,
            data: [20, 30, 90, 10]
          },
          {
            name: 'dddd',
            type: 'bar',
            barWidth: 30,
            barHeight: 30,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 1, color: '#014AC6' },
                { offset: 0, color: '#45CCF4' }
              ])
            },
            label: {
              show: true,
              position: 'right',
              formatter: function (params) {
                return `NO.${params.dataIndex + 1}`
              },
              emphasis: {
                focus: 'series'
              },
              textStyle: {
                fontSize: 24,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 400,
                color: '#999'
              }
            },
            barGap: '2%',
            data: [20, 30, 90, 10]
          }
        ],
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    }
  },
  created () { },
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const myChartOne = echarts.init(document.getElementById('lineOne'))
      myChartOne.setOption(this.lineOne)

      const myChartTwo = echarts.init(document.getElementById('lineTwo'))
      myChartTwo.setOption(this.lineTwo)

      const myChartThree = echarts.init(document.getElementById('lineThree'))
      myChartThree.setOption(this.lineThree)
    }
  }
}
</script>
<style scoped lang="less">
</style>
